<template>
<q-tr class="cloud-file-item"
      :props="file" @click.native.stop="selFile($event,file.row)"
      @dblclick.native.stop="dblclickE(file.row)"
      :class="{'active': isActive}"
      @contextmenu.native.stop="showMenu($event, 'menu'+file.row.index, file.row)"
  >
    <q-td key="label" :props="file">
      <q-icon class="vertical-middle" v-if="file.row.isFile" :name="'img:statics/svg/'+file.row.type+'.svg'" style="font-size:18px;" />
      <q-icon class="vertical-middle" v-else name="img:statics/svg/file-icon.svg" style="font-size:18px;" />
      <span v-if="!edit" class="margin-l-10 name ellipsis">
                {{ file.row.label }}
                <q-tooltip :delay="1000">{{file.row.label}}</q-tooltip>
              </span>
      <q-input class="margin-l-10 name renameInput" :class="{'hidden':!edit}" v-model="rename" dense outlined
               :ref="'renameInput2'+file.row.id" @keyup.enter="reNameBlur($event)" @blur="setNewNameFun($event, file.row, )" />
    </q-td>
    <q-td key="size" :props="file">{{ file.row.isFile?sizeFormat(file.row.size):'—' }}</q-td>
    <q-td key="timestamp" :props="file">{{ dateFormat(file.row.timestamp) }}</q-td>
    <q-menu :ref="'menu'+file.row.index" touch-position context-menu no-parent-event>
      <q-list dense style="min-width: 150px">
        <q-item clickable v-close-popup v-if="!file.row.isFile" @click="dblclickE(file.row)">
          <q-item-section>打开下一级</q-item-section>
        </q-item>
        <q-item
          clickable v-close-popup v-if="!(!file.isFile && file.source === 'cloud')" @click="renameFun(file.row)">
          <q-item-section>重命名</q-item-section>
        </q-item>
        <q-item clickable v-close-popup v-if="file.row.isFile&&file.source!=='machine'" @click="addCompareList(file.row)">
          <q-item-section>加入对比列表</q-item-section>
        </q-item>
        <q-item
          clickable v-close-popup v-if="file.row.isFile && file.row.source === 'cloud'" @click="showVersionList(file.row)">
          <q-item-section>版本履历</q-item-section>
        </q-item>
        <q-item
          clickable v-close-popup v-if="file.row.isFile" @click="editFile(file.row)">
          <q-item-section>编辑</q-item-section>
        </q-item>
        <q-item
          clickable v-close-popup @click="deleteFun(file.row)">
          <q-item-section>删除</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-tr>
</template>

<script>
import { date } from 'quasar'
export default {
  name: 'file-item-tr',
  props: {
    file: {
      type: Object
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      edit: false, // 是否是编辑转状态
      rename: '' // 重命名的暂存名字
    }
  },
  methods: {
    // 选择文件
    selFile (event, file) {
      this.$emit('selFiles', event, file)
    },
    // 双击文件
    dblclickE (file) {
      this.$emit('dblclickE', file)
    },
    // 右键展示菜单
    showMenu (event, ref, file) {
      this.$refs[ref].show(event)
      this.$emit('setFile', file)
    },
    // 重命名
    renameFun (file) {
      this.rename = file.label
      this.edit = true
      // 设置选中区域
      this.$nextTick(() => {
        const input = this.$refs['renameInput2' + file.id]
        const dominput = input.constructor === Array ? input[0].$refs.input : input.$refs.input
        const endPos = this.getTxtPos(file.label)
        if (dominput.setSelectionRange) {
          dominput.focus()
          dominput.setSelectionRange(0, endPos)
        } else if (dominput.createTextRange) {
          var range = dominput.createTextRange
          range.collapse(true)
          range.moveStart('character', 0)
          range.moveEnd('character', endPos)
          range.select()
        }
      })
    },
    // 重命名回车
    reNameBlur (event) {
      event.target.blur()
    },
    // 重命名失去焦点,真正去重命名
    setNewNameFun (event, file) {
      event.preventDefault()
      // 如果名字没有变化，就这样了
      if (this.file.row.label === this.rename) {
        this.edit = false
        return
      }
      this.$emit('setNewNameFun', file, this.rename)
    },
    // 获取选中区域的终止位置
    getTxtPos (label) {
      let txtArr = label.split('.')
      if (txtArr.length === 1) {
        return label.length
      }
      const lastLength = txtArr[txtArr.length - 1].length
      return label.length - lastLength - 1
    },
    // 加入对比列表
    addCompareList (file) {
      this.$emit('addCompareList', file)
    },
    // 显示版本履历
    showVersionList (file) {
      this.$emit('showVersionList', file)
    },
    // 编辑文件
    editFile (file) {
      this.$emit('editFile', file)
    },
    // 删除
    deleteFun (file) {
      this.$emit('deleteFun', file)
    },
    // 时间格式化
    dateFormat (timestamp) {
      return date.formatDate(timestamp, 'YYYY-MM-DD HH:mm:ss')
    },
    // 文件大小格式化
    sizeFormat (size) {
      if (size === 0) {
        return '0B'
      } else if (size / 1024 < 1) {
        return size + 'B'
      } else if (size / 1024 / 1024 < 1) {
        return (size / 1024).toFixed(2) + 'K'
      } else if (size / 1024 / 1024 / 1024 < 1) {
        return (size / 1024 / 1024).toFixed(2) + 'M'
      } else {
        return (size / 1024 / 1024 / 1024).toFixed(2) + 'G'
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.cloud-file-item{
  &.active{
    background-color rgba(95,119,253, 0.2)
  }
  .name{
    display inline-block
    width 350px
    vertical-align middle
  }
  .renameInput{
    background-color #fff
  }
}
</style>
